<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!--<base href="//webapi.amap.com/ui/1.0/ui/misc/PathSimplifier/examples/"/>-->
    <meta charset="utf-8">
    <link rel="shortcut icon" href="/images/favicon/favicon.ico"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>简单路径</title>
    <style>
        html,
        body,
        #container {
            width: 100%;
            height: 100%;
            margin: 0px;
        }
    </style>
    <link rel="stylesheet" href="/css/layui.css">
</head>

<body>
<div style="width: 1200px; margin: 0 auto;">
    <div class="layui-layout layui-layout-admin">
        <div class="layui-header">
            <div class="layui-logo">layui 后台布局</div>
            <!-- 头部区域（可配合layui已有的水平导航） -->
            <ul class="layui-nav layui-layout-left">
                <li class="layui-nav-item"><a href="">控制台</a></li>
                <li class="layui-nav-item"><a href="">商品管理</a></li>
                <li class="layui-nav-item"><a href="">用户</a></li>
                <li class="layui-nav-item">
                    <a href="javascript:;">其它系统</a>
                    <dl class="layui-nav-child">
                        <dd><a href="">邮件管理</a></dd>
                        <dd><a href="">消息管理</a></dd>
                        <dd><a href="">授权管理</a></dd>
                    </dl>
                </li>
            </ul>
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item">
                    <a href="javascript:;">
                        <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
                        贤心
                    </a>
                    <dl class="layui-nav-child">
                        <dd><a href="">基本资料</a></dd>
                        <dd><a href="">安全设置</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item"><a href="">退了</a></li>
            </ul>
        </div>

    </div>

    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
        <legend>范围选择</legend>
    </fieldset>
    <!--<div class="layui-form">-->
    <!--<div class="layui-form-item">-->
    <!--<div class="layui-inline">-->
    <!--<label class="layui-form-label">日期范围</label>-->
    <!--<div class="layui-input-inline">-->
    <!--<input type="text" class="layui-input" id="test6" placeholder=" - ">-->
    <!--</div>-->
    <!--</div>-->
    <!--</div>-->
    <!--<div class="layui-inline">-->
    <!--<button class="layui-btn layuiadmin-btn-useradmin" lay-submit="" lay-filter="LAY-user-front-search">-->
    <!--<i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>-->
    <!--</button>-->
    <!--</div>-->

    <!--</div>-->

    <!--<div>-->
    <!--<form class="layui-form" action="">-->
    <!--<div class="layui-form-item">-->
    <!--<label class="layui-form-label">输入框</label>-->
    <!--<div class="layui-input-block">-->
    <!--<input type="text" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">-->
    <!--</div>-->
    <!--</div>-->
    <!--<div class="layui-form-item">-->
    <!--<label class="layui-form-label">密码框</label>-->
    <!--<div class="layui-input-inline">-->
    <!--<input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">-->
    <!--</div>-->
    <!--<div class="layui-form-mid layui-word-aux">辅助文字</div>-->
    <!--</div>-->
    <!--<div class="layui-form-item">-->
    <!--<label class="layui-form-label">选择框</label>-->
    <!--<div class="layui-input-block">-->
    <!--<select name="city" lay-verify="required">-->
    <!--<option value=""></option>-->
    <!--<option value="0">北京</option>-->
    <!--<option value="1">上海</option>-->
    <!--<option value="2">广州</option>-->
    <!--<option value="3">深圳</option>-->
    <!--<option value="4">杭州</option>-->
    <!--</select>-->
    <!--</div>-->
    <!--</div>-->
    <!--<div class="layui-form-item">-->
    <!--<label class="layui-form-label">复选框</label>-->
    <!--<div class="layui-input-block">-->
    <!--<input type="checkbox" name="like[write]" title="写作">-->
    <!--<input type="checkbox" name="like[read]" title="阅读" checked>-->
    <!--<input type="checkbox" name="like[dai]" title="发呆">-->
    <!--</div>-->
    <!--</div>-->
    <!--<div class="layui-form-item">-->
    <!--<label class="layui-form-label">开关</label>-->
    <!--<div class="layui-input-block">-->
    <!--<input type="checkbox" name="switch" lay-skin="switch">-->
    <!--</div>-->
    <!--</div>-->
    <!--<div class="layui-form-item">-->
    <!--<label class="layui-form-label">单选框</label>-->
    <!--<div class="layui-input-block">-->
    <!--<input type="radio" name="sex" value="男" title="男">-->
    <!--<input type="radio" name="sex" value="女" title="女" checked>-->
    <!--</div>-->
    <!--</div>-->
    <!--<div class="layui-form-item layui-form-text">-->
    <!--<label class="layui-form-label">文本域</label>-->
    <!--<div class="layui-input-block">-->
    <!--<textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>-->
    <!--</div>-->
    <!--</div>-->
    <!--<div class="layui-form-item">-->
    <!--<div class="layui-input-block">-->
    <!--<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>-->
    <!--<button type="reset" class="layui-btn layui-btn-primary">重置</button>-->
    <!--</div>-->
    <!--</div>-->
    <!--</form>-->
    <!--</div>-->


    <div id="container" style="height: 600px;width: 1200px;">

    </div>


</div>
<script src="/layui.js"></script>
<script type="text/javascript" src='//webapi.amap.com/maps?v=1.4.14&key=0aeec87c9a9abc1a2b28537edefe1863'></script>
<!-- UI组件库 1.0 -->
<script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
<script type="text/javascript" src="/layui.js"></script>
<script>
    // //注意：导航 依赖 element 模块，否则无法进行功能性操作
    // layui.use(['element', 'laydate', 'form'], function () {
    //     var element = layui.element;
    //     var laydate = layui.laydate;
    //     var form = layui.form;
    //     //日期范围
    //     laydate.render({
    //         elem: '#test6'
    //         , range: true
    //     });
    //     //监听提交
    //     form.on('submit(formDemo)', function (data) {
    //         layer.msg(JSON.stringify(data.field));
    //         return false;
    //     });
    // });


    //创建地图
    var map = new AMap.Map('container', {
        zoom: 4
    });
    AMapUI.load(['ui/misc/PathSimplifier', 'lib/$'], function (PathSimplifier, $) {
        if (!PathSimplifier.supportCanvas) {
            alert('当前环境不支持 Canvas！');
            return;
        }
        var pathSimplifierIns = new PathSimplifier({
            zIndex: 100,
            map: map, //所属的地图实例
            getPath: function (pathData, pathIndex) {
                //设置数据
                return pathData.path;
            },
            getHoverTitle: function (pathData, pathIndex, pointIndex) {

                if (pointIndex >= 0) {
                    return pathData.name + '，点：' + pointIndex + '/' + pathData.path.length;
                }
                return pathData.name + '，点数量' + pathData.path.length;
            },
            renderOptions: {
                renderAllPointsIfNumberBelow: -1 //绘制路线节点，如不需要可设置为-1
            }
        });
        window.pathSimplifierIns = pathSimplifierIns;
        $.ajax({
            type: "GET",
            url: '/getGpsData',
            success: function (result) {
                console.log(result);
                pathSimplifierIns.setData(result.data[1]);
                AMapUI.loadUI(['overlay/SimpleMarker'], function (SimpleMarker) {

                    var position = result.data[0].list;
                    var iconLabel = result.data[0].iconLabel;
                    var iconStyle = result.data[0].iconStyle;

                    var position1 = result.data[1].list;
                    var iconLabel1 = result.data[1].iconLabel;
                    var iconStyle1 = result.data[1].iconStyle;

                    // 设置开始点图标样式
                    new SimpleMarker({
                        //设置节点属性
                        iconLabel: iconLabel,
                        iconStyle: iconStyle,
                        map: map,
                        position: position
                    });
                    // 设置结束点图标样式
                    new SimpleMarker({
                        //设置节点属性
                        iconLabel: iconLabel1,
                        iconStyle: iconStyle1,
                        map: map,
                        position: position1
                    });

                });
            }
        });
    });
</script>
</body>

</html>